<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入两个数字，比较大小</title>
    <style>
        body{
            font:12px/1.5 arial;
            text-align:center;
        }
        .f-text{
            width:50px;
            border:1px solid #ccc;
            background:#f0f0f0;
            font-family:inherit;
            padding:3px;
        }
        .f-btn{
            margin:0 10px;
        }
        strong{
            padding:0 10px;
        }
        span{
            font-weight:700;
            color:red;
        }
        </style>
</head>
<body>
    <input type="text" class="f-text" /><strong>vs</strong><input type="text" class="f-text" /><input type="button" value="最大的数是 &raquo;" class="f-btn" /><span>？</span>
</body>
</html>

<script type="text/javascript">
    var aInput = document.getElementsByTagName("input");
    var aSpan = document.getElementsByTagName("span")[0];
    var i = 0;
    
    for (i = 0; i < aInput.length - 1; i++)
    {
        aInput[i].onkeyup = function ()
        {
            this.value = this.value.replace(/[^\d]/,"")
        }	
    }
    
    aInput[2].onclick = function ()
    {
        /*未输入数字时，按钮的提示*/
        (aInput[0].value == "" || aInput[1].value == "") ?
        alert("请输入数字！") :
        /*使用了math对象中max数据对比的方法*/
        (aSpan.innerHTML = Math.max(aInput[0].value, aInput[1].value)) ;
    }
</script>